<template>
    <chart :options='options'/>
</template>

<script>
export default {
  name: 'ChartsBarLine',
  props: {
    title: {
      type: String,
      default: ''
    },
    allLine:{
      type: Boolean,
      default: () => {
        return false
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    dimensions: {
      type: Array,
      default: () => {
        return null
      }
    },
    units: {
      type: Array,
      default: () => {
        return []
      }
    },
    name: {
      type: Array,
      default: () => {
        return []
      }
    },
    colors: {
      type: Array,
      default: () => {
        return null
      }
    },
    showLabel: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    type: {
      type: Array,
      default: () => {
        return []
      }
    },
    legend: {
      type: Array,
      default: () => {
        return null
      }
    },
    paddingone: {
      type: Array,
      default: () => {
        return [10, 10, 10, 0];
      },
    },
    boundaryGap: {
      type: Boolean,
      default: () => {
        return null;
      },
    },
    borderRadius: {
      type: Boolean,
      default: true
    },
    barWidth: {
      type: Number,
      default: 20
    },
    twoAxis: {
      type: Boolean,
      default: true
    },
    lineWithCircle: {
      type: Boolean,
      default: true
    },
    isArea: {
      type: Boolean,
      default: false
    },
    smooth: {
      type: Boolean,
      default: false
    },
    rotate: {
      type: Number,
      default: 0
    },
    dataIndex: {
      type: Array,
      default: () => {
        return []
      }
    },
    selectedMode: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    markLine: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    right: {
      type: String,
      default: () => {
        return '8%'
      }
    },
    left: {
      type: String,
      default: () => {
        return '2%'
      }
    },
    bottom: {
      type: String,
      default: () => {
        return "5%";
      },
    },
    top: {
      type: String,
      default: () => {
        return "15%";
      },
    },
    tooltipshow: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  },
  computed: {
    options () {
      const series = []
      const yAxis = []
      for (let i = 0; i < this.type.length; i++) {
        const item = {
          type: this.type[i],
          name: this.legend[i],
          label: {
            show: this.showLabel,
            position: 'top',
            fontSize: 20,
            // formatter: '{c}',
            color: 'black',
          },
          itemStyle: {
            emphasis: {
                barBorderRadius: 30
            },
            normal: {
              barBorderRadius:[10, 10, 10, 10]
            }
          }
        }
        // if (this.twoAxis) {
        //   if (this.dataIndex.length > 0) {
        //     item.yAxisIndex = this.dataIndex[i]
        //   } 
        //   else {
        //     // item.yAxisIndex = i
        //   }
        // }
        if (this.type[i] === 'bar') {
          item.barWidth = this.barWidth

          if (this.borderRadius) {
            item.itemStyle.normal.barBorderRadius = [5, 5, 0, 0]
          }
        }
        if (this.type[i] === 'line') {
          if (this.borderRadius) {
            item.itemStyle.normal.barBorderRadius = [0, 0, 0, 0]
          }
          if (this.lineWithCircle) {
            item.symbolSize = 8
            item.itemStyle = {
              borderColor: '#fff',
              borderWidth: 1
            }
          } else {
            item.symbolSize = 0
          }
          if (this.smooth) {
            item.smooth = true
          }
          if (this.isArea) {
            item.areaStyle = {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: this.colors[i]
                }, {
                  offset: 1, color: '#9191AF'
                }],
                global: false
              }
            }

          }
          if(this.allLine){
            item.label= {
              show:true,
              position:i == 0?'top':'bottom',
              color:'#000'
            }
          }
        }
        if (this.markLine) {
          item.markLine = {
            silent: false,
            precision: 4,
            // lineStyle: {
            //   color: 'red',
            //   width: 5,
            //   type: 'solid'
            // },
            data: [
              {
                yAxis: 8
              }
            ]
          }
        }
        series.push(item)
        if (this.twoAxis) {
          yAxis.push({
            name: this.units[i],
            min: 0,
            nameLocation: 'end',
            scale:true,
            nameGap: 6,
            nameTextStyle: {
              fontSize: 20,
              color: '#ccc',
              algin: "left",
              padding: this.paddingone,
            },
            splitLine: {
              show:true,
              lineStyle:{
                color: '#315070',
                width: 1,
                type: 'dashed'
              }
            },
            axisLine:{
              interval: 0,
              color: "#ccc",
              fontSize: 20,
            },
            axisLabel: {
              color: '#ccc',
              fontSize: 20
            },
            show: true,
            // x: 'center',
            type: 'value'
          })
        } else {
          if (i === 0) {
            yAxis.push({
              name: this.units[i],
              min: 0,
              nameLocation: 'end',
                backgroundColor:'#9191AF',
              nameGap: 6,
              nameTextStyle: {
              fontSize: 20,
              color: '#ccc',
              algin: "left",
              padding: this.paddingone,
            },
            splitLine: {
              show:true,
              lineStyle:{
                color: '#315070',
                width: 1,
                type: 'dashed'
              }
            },
            axisLine:{
              interval: 0,
              color: "#ccc",
              fontSize: 20,
            },
            axisLabel: {
              color: '#ccc',
              fontSize: 20
            },
              show: true,
              // x: 'center',
              type: 'value'
            })
          }
        }
      }
      return {
        color: this.colors,
        title: {
          text: this.title
        },
        grid: {
          containLabel: true,
          left: this.left,
          top: this.top,
          right: this.right,
          bottom: this.bottom,
        },
        legend: {
          show: true,
          left: 'right',
          selectedMode: this.selectedMode,
          itemWidth: 15,
          itemHeight: 15,
          data: this.legend,
          textStyle: {
            color: '#9191AF',
            fontSize: 20
          }
        },
        tooltip: {
          show: this.tooltipshow,
          trigger: 'axis',
          textStyle: {
            color: 'rgba(304, 304, 304, 0.9)',
            fontSize: 20
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        dataset: {
          dimensions: this.dimensions,
          source: this.data
        },
        xAxis: {
          type: 'category',
          name:this.name,
          boundaryGap: this.boundaryGap,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#255a8a",
              fontSize: 20,
            },
          },
          nameTextStyle: {
              fontSize: 20,
              color: "#ccc",
              algin: "left",
              padding: this.paddingone,
            },
          
          axisLabel: {
            interval: 0,
            color: "#ccc",
            fontSize: 20,
           
            // formatter: function (value) {
            //   var ret = "";
            //   var maxLength = 2;
            //   var valLength = value.length;
            //   var rowN = Math.ceil(valLength / maxLength);
            //   if(rowN > 1){
            //     for (var i = 0; i < rowN; i++){
            //       var temp = "";
            //       var start = i * maxLength;
            //       var end = start + maxLength;
            //       temp = value.substring(start, end) + "\n";
            //       ret += temp;
            //     }
            //     return ret;
            //   }else{
            //     return value;
            //   }
            // },
          },
        },
        yAxis: yAxis,
        series: series
      }
    }
  },
  methods: {}
}
</script>

<style scoped lang="less">
.ChartBar {

}
</style>
